// 顶部组件
import React from 'react'

export default class Header extends React.Component {
  state = {
    title: '',
  }
  handleTitle = (e) => {
    this.setState({
      title: e.target.value,
    })
  }
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          value={this.state.title}
          onChange={this.handleTitle}
          onKeyUp={this.addTodo}
          className="new-todo"
          placeholder="你有什么需要做的呢?"
        />
      </header>
    )
  }
  // 添加任务
  addTodo = (e) => {
    // 如何判断按下的是回车键
    if (e.keyCode === 13) {
      // 添加任务: 其实就是把输入的任务名称传递给父组件
      this.props.addTodo(this.state.title)
      // 清空表单
      this.setState({
        title: '',
      })
    }
  }
}
